<template>
    <div class="time-picker">
        <select v-model="hour">
            <option 
                v-for="h in 24" 
                :key="h"
                :value="h - 1"
            >
                {{ h - 1 }}
            </option>
        </select>
        <select v-model="minute">
            <option 
                v-for="m in 60" 
                :key="m"
                :value="m - 1"
            >
                {{ m - 1 }}
            </option>
        </select>
        <select v-model="second">
            <option 
                v-for="s in 60" 
                :key="s"
                :value="s - 1"
            >
                {{ s - 1 }}
            </option>
        </select>
        <button @click="onOk">ok</button>
    </div>
</template>

<script>
export default {
    props: {
        value: Array,
    },
    emits: ['update:value'],
    data () {
        return {
            hour: this.value[0],
            minute: this.value[1],
            second: this.value[2],
        };
    },
    methods: {
        onOk () {
            this.$emit('update:value', [
                this.hour,
                this.minute,
                this.second,
            ]);
        },
    },
}
</script>